import React, { Component } from 'react';
import './Left.scss'
// 1：导入通信对象
import  context from '../../utils/events'
import { category_list } from '../../utils/api'
class Left extends Component {
    constructor(props){
        super(props)
        this.state={
            currentIndex:0,
            arr:[]
        }
    }
    componentDidMount(){
        category_list().then((res)=>{
            this.setState({
                arr:res.data.list
            },()=>{
            })
            
            let id = res.data.list[0].id
            this.handleClick(id,0)
        })
    }
    handleClick(id,index){
        // 保存下标
        this.setState({
            currentIndex:index
        })
        // 2：通过通信对象 .emit 触发事件并传值
        context.emit('derLiverId',id)
    }
    render() {
        return (
            <ul className='left'>
                {
                    this.state.arr.map((item,index)=>{
                        return (

                            <li style={{backgroundColor:this.state.currentIndex === index ? "white" : ""}} key={index} onClick={()=>{this.handleClick(item.id,index)}}>
                                <span className={this.state.currentIndex === index ? 'actives': ''}>
                                    {item.name}
                                </span>
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
}

export default Left;